
<template>
	<section id="car-map" :class="[$.env !== 'native' ? 'in-wechat' : '']">
		<magic-header  v-if="$.env !== 'wxPublic'" :headeHide="headeHide" titleName="爱车服务"></magic-header>
		
			<section id="car-map-container"></section>
			<section class="float-buttons">
				<a class="img-button" @click="toggleLocateTarget">
          <img :src="locateTargetImg" width="45" height="45" />
        </a>
				<a class="img-button">
					<router-link :to="{name:'car-list'}">
            <img src="../../assets/car_map_park_list_icon.png" width="45" height="45" />
					</router-link>
				</a>
				<a class="img-button">
					<router-link :to="{name:'car-rails',query:{longitude:longitude,latitude:latitude}}">
            <img src="../../assets/car_fence_icon_normal2.png" width="45" height="45" />
					</router-link>
				</a>
				<a class="img-button">
					<router-link :to="{name:'path-navigation',query:{longitude:longitude,latitude:latitude}}">
            <img src="../../assets/car_navi_icon_normal2.png" width="45" height="45" />
					</router-link>
				</a>
				<a class="img-button">
					<router-link :to="{name:'car-share-request'}">
            <img src="../../assets/car_secret_icon_normal2.png" width="45" height="45" />
					</router-link>
				</a>

			</section>
			<mu-popup position="bottom" class="popup-bottom" popupClass="popup-bottom" :open="!!selectedCar && $route.name=='car_map'" @close="selectedCar=''">
			    <mu-appbar :title="selectedCar.brandId">
			      <img class="car-logo" :src="selectedCar.logo || defaultCarLogo" slot="left"/>
			      <mu-flat-button slot="right" label="X" color="white" @click="selectedCar=''"/>
			    </mu-appbar>
				<section class="car-map-info-and-operation">
					<p><span>车主：{{selectedCar.driver}}</span><span>电话：{{selectedCar.mobile}}</span></p>
					<p><span>{{selectedCar.status}}</span><span>车速：{{selectedCar.speed}} km/h</span></p>
					<p>位置：{{selectedCar.address}}</p>
					<section class="car-operation">
						<router-link :to="{name:'running-tracks',query:{id:selectedCar.id}}">
							<img src="../../assets/popup_icon_guiji2.png" width="24" height="24" style="vertical-align: middle" />
              <span>行车轨迹</span>
						</router-link>
						<!-- <router-link :to="{name:'vehicle-instrument',query:{id:selectedCar.id}}">
              <img src="../../assets/popup_icon_yibiao2.png" width="24" height="24" style="vertical-align: middle" />
							车辆仪表
						</router-link> -->
						<router-link :to="{name:'drive-achievement',query:{id:selectedCar.id}}">
              <img src="../../assets/popup_icon_tongji2.png" width="24" height="24" style="vertical-align: middle" />
              <span>驾驶成就</span>
						</router-link>
						<router-link :to="{name:'car-location',query:{id:selectedCar.id}}">
              <img src="../../assets/popup_icon_dingwei2.png" width="24" height="24" style="vertical-align: middle" />
              <span>实时定位</span>
						</router-link>
						<router-link :to="{name:'driving-record',query:{id:selectedCar.id}}">
              <img src="../../assets/popup_icon_jiluyi2.png" width="24" height="24" style="vertical-align: middle" />
              <span>行车记录</span>
						</router-link>
						<router-link :to="{name:'car-examinationning',query:{id:selectedCar.id}}">
              <img src="../../assets/popup_icon_tijian2.png" width="24" height="24" style="vertical-align: middle" />
              <span>全车体检</span>
						</router-link>
						<router-link class="full-width" :to="{name:'car-add',query:{id:selectedCar.id}}">
              <span>编辑车辆信息</span>
						</router-link>
					</section>
				</section>
			</mu-popup>
		
		<loading-spin v-show="gettingPersonLocation">
			正在定位...
		</loading-spin>
		 <mu-snackbar class="center" v-if="showMessage" :message="message" action="关闭" @actionClick="showMessage=false"/>

	</section>
</template>

<script>
import magicHeader from "components/magicHeader";
import LoadingSpin from "components/loading-spin";
import getDeviceStatus from "services/binded-device-status";
// import getLocation from 'utilities/get-location'
import getLocation from "services/get-location";
import gpsConvertor from "utilities/gps-convertor";
import localSavedLocation from "services/location-data";
import carGreenIcon from "../../assets/car_green_tiny.png";
import carGrayIcon from "../../assets/car_gray_tiny.png";
import carOrangeIcon from "../../assets/car_orange_tiny.png";
import defaultCarLogo from "../../assets/favicon.png";
import carPositionIconNormal from "../../assets/car_position_icon_normal2.png";
import carPhonePositionIconNormal from "../../assets/car_phone_position_icon_normal2.png";
import wx from "weixin-js-sdk";

export default {
  components: {
    magicHeader,
    // ContentWithLoading,
    // MuFloatButton,
    // MuFlatButton,
    // MuAppbar,
    // MuPopup,
    // MuSnackbar,
    LoadingSpin
  },
  data() {
    return {
      loaded: false,
      showMessage: false,
      message: "",
      locateTarget: "car",
      locateTargetImg: carPositionIconNormal,
      longitude: "",
      latitude: "",
      cars: [],
      selectedCar: "",
      defaultLongitude: 116.404,
      defaultLatitude: 39.915,
      carIcon: "http://developer.baidu.com/map/jsdemo/img/car.png",
      userHead: "",
      defaultUserHead: defaultCarLogo,
      isDrawing: false,
      carIcons: {
        gray: carGrayIcon,
        orange: carOrangeIcon,
        green: carGreenIcon
      },
      defaultCarLogo: defaultCarLogo,
      searchInputError: "",
      hasBindedDevice: false,
      // bindDeviceNote:'请添加车辆并绑定设备',
      bindDeviceNote: "绑定设备将为您提供车辆服务。",

      gettingPersonLocation: false,
      isInWechat: false,
      headeHide: false
    };
  },
  created() {
    alert('env: '+ this.$.env)
    if (this.$.env !== "wxPublic") {
      this.headeHide = true;
      this.isInWechat = true;
    } else {
      this.isInWechat = false;
    }
  },
  mounted() {
    this.initData();
  },
  watch: {
    '$route':{
      deep:true,
      immediate: true,
      handler:function(to, from) {
        alert(to.name)
        if (to.name == "car_map") {
          if (to.query.refresh) {
            this.initData();
            return this.$router.replace({ name: "car_map" });
          }
          if (to.query.id) {
            return this.drawCarsLocation(to.query.id, to.query.hasTerminal);
          }
        }
    }
    } ,
    locateTarget: {
      deep: true,
      immediate: true,
      handler: function(newVal, oldVal) {
        console.log("trigger");
        if (!this.$.isEmpty(newVal)) {
          if (this.locateTarget == "car") {
            this.locateTargetImg = carPositionIconNormal;
          } else {
            this.locateTargetImg = carPhonePositionIconNormal;
          }
        }
      }
    }
  },
  methods: {
    getPosition() {
      //判断微信环境
      if (this.$.env === 'wxPublic') {
        //获取签名
        let vm = this;
        vm.getSign();
        wx.ready(function() {
          wx.getLocation({
            type: "wgs84", // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: function(res) {
              getLocation.getAdd(res.latitude, res.longitude).then(res => {
                let lat = res[0].y;
                let log = res[0].x;
                gpsConvertor({
                  points: [{ lng: log, lat: lat }]
                }).then(
                  points => {
                    vm.longitude = points[0].lng;
                    vm.latitude = points[0].lat;
                    localSavedLocation.set({
                      longitude: points[0].lng,
                      latitude: points[0].lat
                    });
                    vm.gettingPersonLocation = false;
                    vm.drawPerson();
                  },
                  err => {
                    let localSavedUserLocation = localSavedLocation.get();
                    vm.longitude = localSavedUserLocation
                      ? localSavedUserLocation.longitude
                      : vm.defaultLongitude;
                    vm.latitude = localSavedUserLocation
                      ? localSavedUserLocation.latitude
                      : vm.defaultLatitude;
                    vm.gettingPersonLocation = false;
                    vm.drawPerson();
                    vm.showMessageNote(err);
                  }
                );
              });
            }
          });
        });
      } else {
        let vm = this
        setTimeout(function(){
          vm.gettingPersonLocation = false;
          vm.$.toast('不在微信环境中，无法提供定位')
        },1000)
        // this.gettingPersonLocation = false;
        // this.$.push("data_getLatLng", {}, resp => {
        //   let vm = this;
        //   resp = JSON.parse(resp);
        //   this.latitude = parseFloat(resp.latitude);
        //   this.longitude = parseFloat(resp.longitude);
        //   getLocation
        //     .getAdd(parseFloat(resp.latitude), parseFloat(resp.longitude))
        //     .then(resp => {
        //       let lat = res[0].y;
        //       let log = res[0].x;
        //       gpsConvertor({
        //         points: [{ lng: log, lat: lat }]
        //       }).then(
        //         points => {
        //           this.longitude = points[0].lng;
        //           this.latitude = points[0].lat;
        //           localSavedLocation.set({
        //             longitude: points[0].lng,
        //             latitude: points[0].lat
        //           });
        //           this.gettingPersonLocation = false;
        //           drawPerson.bind(this)();
        //         },
        //         err => {
        //           let localSavedUserLocation = localSavedLocation.get();
        //           this.longitude = localSavedUserLocation
        //             ? localSavedUserLocation.longitude
        //             : this.defaultLongitude;
        //           this.latitude = localSavedUserLocation
        //             ? localSavedUserLocation.latitude
        //             : this.defaultLatitude;
        //           this.gettingPersonLocation = false;
        //           drawPerson.bind(this)();
        //           this.showMessageNote(err);
        //         }
        //       );
        //     });
        // });
      }
    },
    getSign() {
      alert(this.$.state);
      let signHref = location.href.split("#")[0];
      let signOpenId = this.$.state;
      let signUrlInfo = encodeURIComponent(signHref);
      let signData = {
        clientType: '3',
        methodName: "QueryJssdkConfig",
        shopId: "",
        userId: "",
        urlInfo: signUrlInfo,
        wechatOpenId: signOpenId
      };
      this.$.wxGet(signData).then(res => {
        var res = res.data;
        alert(JSON.stringify(res.data));
        wx.config({
          debug: true,
          appId: res.appId,
          timestamp: res.timestamp,
          nonceStr: res.nonceStr,
          signature: res.signature,
          jsApiList: ["getLocation"]
        });
      });
    },
    initData() {
      getDeviceStatus.bind(this)({},data => {
          if (data.hasBindedDevice) {
            this.hasBindedDevice = true;
            this.cars = data.cars;
            this.locateTarget = "car";
            this.userHead = data.userInfo.headPhoto;
            this.selectedCar = this.cars[0];
            console.log(this.userHead);
            this.loaded = true;
            this.drawCarsLocation();
          } else {
            this.hasBindedDevice = false;
            this.locateTarget = "person";
            this.userHead = data.userInfo.headPhoto;
            console.log(this.userHead);
            this.loaded = true;
            this.drawPersonLocation();
            this.showMessageNote(this.bindDeviceNote);
          }
        },
        err => {
          this.showMessageNote(err);
        }
      );
    },
    showMessageNote(message) {
      this.message = message;
      this.showMessage = true;
    },
    toggleLocateTarget() { // 切换定位
       alert('切换')
      if (!this.isDrawing) { //  判断切换
        if (this.hasBindedDevice) {
          if (this.locateTarget == "car") {
            this.locateTarget = "person";
            this.drawPersonLocation(); // 第一次切换
          } else {
            this.locateTarget = "car";
            this.drawCarsLocation();
          }
        } else {
          this.showMessageNote(this.bindDeviceNote);
        }
      } else {
        this.message = "您的切换频率过快，请稍后切换。";
        this.showMessage = true;
      }
    },
    cleanOverlay() {
      this.map && this.marker && this.map.removeOverlay(this.marker);
      this.map &&
        this.markers &&
        this.markers.length &&
        this.markers.forEach(marker => {
          this.map.removeOverlay(marker);
        });
    },
    drawMap() {
      !this.mapInited && (this.map = new BMap.Map("car-map-container"));
      this.point = new BMap.Point(this.longitude, this.latitude);
      this.map.centerAndZoom(this.point, 15);
      let trafficControl = new BMapLib.TrafficControl({ showPannel: false });
      !this.mapInited && this.map.addControl(new BMap.NavigationControl());
      !this.mapInited && this.map.addControl(trafficControl);
      !this.mapInited && trafficControl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT);

      this.mapInited = true;
    },
    drawCarsLocation(carId, hasTerminal) {
      this.isDrawing = true;
      let targetCar = null;
      if (carId) {
        this.cars.forEach(car => {
          if (car.id == carId && hasTerminal) {
            targetCar = car;
          }
        });
        alert(JSON.stringify(targetCar))
        if (!targetCar) {
          if ((targetCar = this.cars[0])) {
            // this.message='您选择的车辆未绑定设备，已定位到默认车辆。'
            this.message = "绑定设备将为您提供车辆服务。";
            this.showMessage = true;
          } else {
            targetCar = null;
            this.hasBindedDevice = false;
            this.locateTarget = "person";
            this.drawPersonLocation();
            // this.message='您的车辆未绑定设备，请绑定。'
            // this.message = "绑定设备将为您提供车辆服务。";
            // this.showMessage = true;
            return;
          }
          // targetCar=this.cars[0]
          // this.message='您选择的车辆未绑定设备，已定位到默认车辆。'
          // this.showMessage=true
        } else {
          this.selectedCar = targetCar;
        }
      } else {
        targetCar = this.cars[0];
      }

      this.loaded = true;
      this.cleanOverlay();
      this.longitude = targetCar.longitude;
      this.latitude = targetCar.latitude;
      setTimeout(() => {
        this.drawMap();
        let points = this.cars.map(car => {
          return new BMap.Point(car.longitude, car.latitude);
        });

        this.markers = points.map((point, index) => {
          // return new BMap.Marker(point,{icon:new BMap.Icon(this.carIcon,new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}),rotation:this.cars[index].rotation})
          // return new BMap.Marker(point,{icon:new BMap.Icon(this.carIcons[this.cars[index].statusColor],new BMap.Size(30,52),{anchor : new BMap.Size(27, 13)}),rotation:this.cars[index].rotation})
          return new BMap.Marker(point, {
            icon: new BMap.Icon(
              this.carIcons[this.cars[index].statusColor],
              new BMap.Size(20, 35),
              { anchor: new BMap.Size(27, 13) }
            ),
            rotation: this.cars[index].rotation
          });
        });

        this.markers.forEach((marker, index) => {
          this.map.addOverlay(marker);
          marker.addEventListener("click", () => {
            console.log(this.cars[index]);
            this.selectedCar = this.cars[index];
          });
        });
        this.isDrawing = false;
      }, 500);
    },
    drawPerson(){
      this.loaded = true;
        setTimeout(() => {
          this.drawMap();
          this.marker = new BMap.Marker(this.point);
          this.map.addOverlay(this.marker);
          this.marker.enableDragging();
          this.isDrawing = false;
        }, 500);
    },
    drawPersonLocation() {
      this.isDrawing = true;
      this.cleanOverlay();
      this.gettingPersonLocation = true;
      this.getPosition();
      //   getLocation({},(position) => {

      //     },
      //     err => {
      //       let localSavedUserLocation = localSavedLocation.get();
      //       this.longitude = localSavedUserLocation
      //         ? localSavedUserLocation.longitude
      //         : this.defaultLongitude;
      //       this.latitude = localSavedUserLocation
      //         ? localSavedUserLocation.latitude
      //         : this.defaultLatitude;
      //       this.gettingPersonLocation = false;
      //       drawPerson.bind(this)();
      //       this.showMessageNote(err);
      //     }
      //   );
    }
  }
};
</script>

<style lang="scss">
@import "../../scss/variables.scss";
#car-map {
  overflow: hidden !important;
  height: 100%;
  position: relative;
  #car-map-container {
    width: 100%;
    height: 100%;
  }
  .float-buttons {
    position: fixed;
    right: $spaceSmall;
    top: $spaceSmall;
    .img-button {
      display: block;
      margin-top: $spaceSmall;
      width: 40px;
      height: 40px;
      i {
        color: $colorSecondary;
      }
      a {
        display: block;
        width: 100%;
        height: 100%;
        color: #fff;
        i {
          width: 100%;
          height: 100%;
          line-height: 40px;
          text-align: center;
          text-indent: 2px;
        }
      }
    }
  }

  &:not(.in-wechat) {
    .content-with-loading {
      .content-wrapper {
        padding-bottom: 45px;
        .float-buttons {
          top: 45px;
        }
      }
    }
  }
  .BMap_stdMpType4 .BMap_stdMpZoom {
    right: -0.5rem;
  }
  #tcBtn {
    bottom: 123px !important;
    right: 1.5rem !important;
    width: 35px !important;
    height: 35px !important;
    border: none;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
    // transform: scale(1.16);
    box-shadow: 1px 0px 3px rgba(0, 0, 0, 0.5);
    // opacity: 0.7;
    &.maplibTcBtn_mobile {
      background-size: 66px auto !important;
    }
    &.maplibTcBtnOff_mobile {
      background-position: 2px 0 !important;
    }
  }
}
.BMap_stdMpCtrl {
  right: 2rem !important;
  bottom: 4rem !important;
}
.in-wechat .float-buttons {
  padding-top: 50px;
}

.car-logo {
  width: 40px;
  height: auto;
}
.car-map-info-and-operation {
  padding: $spaceSmall;
  p span {
    display: inline-block;
    min-width: 40%;
  }
  .car-operation {
    text-align: justify;
    padding-top: $spaceSmall;
    span{
      color:#000!important;
    }
    a {
      padding: $spaceSmall*0.5;
      display: inline-block;
      width: 48%;
      border: solid 2px $colorSecondary;
      border-radius: 2px;
      margin-bottom: $spaceSmall*0.5;
      text-align: center;
      &.full-width {
        width: 100%;
        margin-bottom: 0;
        color: #fff;
        padding: $spaceSmall;
        background-color: $colorSecondary;
      }
    }
  }
}
.mu-popup-bottom.popup-bottom {
  width: 100%;
  .mu-appbar {
    background-color: #f8f8f8;
    height: 45px;
    color: #000;
    .mu-flat-button-label {
      color: #000;
    }
  }
  p {
    line-height: 1.5;
  }
}
</style>
